/**
 * Created by ritamashin on 2017/11/1.
 */

import React,{PropTypes,Component} from 'react'
import {View, Text, Image, TouchableHighlight, StyleSheet,InteractionManager} from 'react-native'
import WelcomeText from "react-native/local-cli/templates/HelloNavigation/views/welcome/WelcomeText.ios";
import * as common from './common'
import {COLOR} from '../config'
import {connect} from 'react-redux'
import {bindActionCreators} from 'redux'
import * as actions from '../actions'
import store from '../store'
import logger from '../logger'
import BannerView from './common/homepage/BannerView'
import ScrollableTabView from 'react-native-scrollable-tab-view'

class HomePage extends Component{

    static navigationOptions = ({navigation}) => ({
        title : '首页',
        headerStyle : [styles.navigation],
        headerTitleStyle : [styles.headerTitleStyle],
        headerTintColor: 'white',
        headerRight:  (<TouchableHighlight style={{width:30,height:30}}
                                           onPress={this.pressScanButton}>
            <Image source={require('../../resource/Homepage/icon_scan_red@2x.png')}/>
        </TouchableHighlight>)

    });


    static propTypes = {

        bannerData: PropTypes.array,
        giftItemsData : PropTypes.array,
        recommendHeaderData : PropTypes.array,
        //isLoadMoreData : PropTypes.boolean
    };


    // 构造
      constructor(props) {
        super(props);
        // 初始状态
        this.state = {};
          // bannerData
          //     recommendHeaderData
          //     giftItemsData
          //     tagIdOffsetObj
          store.dispatch(actions.getHomepageBannerInfo('iOS'));
          store.dispatch(actions.getRecommendHeaderTitle());
          store.dispatch(actions.getSecondBannerData(1,2));
      }

      componentDidMount(){
           InteractionManager.runAfterInteractions(()=> {


          })

      }



    render(){
          let {homepage} = this.props;
          let {bannerData, recommendHeaderData, giftItemsData} = homepage;
          if(bannerData.length === 0 ||
              recommendHeaderData.length === 0){
              return <View/>
          }

        return (
            <ScrollableTabView style={styles.container}
                               tabBarBackgroundColor="white"
                               tabBarActiveTextColor={COLOR.themeRedColor}
                               tabBarInactiveTextColor={COLOR.mainTextColor}
                               tabBarTextStyle= {styles.tabBarText}
                               tabBarUnderlineStyle = {styles.tabBarUnderline}
                               onChangeTab = {this.onPressTabAction}>
                {recommendHeaderData.map((element, i)=>(
                    <View tabLabel = {element['title']}
                          key = {i}
                          style={{backgroundColor : 'red', flex: 1}}>
                        <common.Layout>
                            {/*<common.BannerView dataArray={bannerData} onPress = {this.onPressBannerAction} />*/}
                            {/*<Text style={styles.text}>首页</Text>*/}
                            <common.HomepageTableView dataSource={giftItemsData}
                                                      onPressItemAction = { () => this.onPressGiftAction}
                                                      onPressBannerAction = {() => this.onPressBannerAction}
                                                      onPressSecondBannerAction = {() => this.onPressSecondBannerAction}
                                                      endReachAction={this.endReachAction}
                                                      index = {i}
                            />
                        </common.Layout>
                    </View>
                ))}
            </ScrollableTabView>
        )
    }


    // banner点击事件
    onPressBannerAction = (element)=>{
        logger.debug('banner 点击');
        logger.info(element);
    };
    // 第二个banner点击事件
    onPressSecondBannerAction = (item) => {
        logger.debug('second banner 点击');
        logger.info(item);
    };

    // 点击Tab {index : number , ref : dd }
    onPressTabAction = (object) => {
        let {homepage} = this.props;
        let {bannerData, recommendHeaderData} = homepage;
        let recommendObject = recommendHeaderData[object['i']];
        let tagId = recommendObject['tagId'];
        store.dispatch(actions.getRecommendGiftItemData(tagId, 0, object['i']));
    };
    // 点击礼物item
    onPressGiftAction = (giftItem) => {
        logger.debug('礼物');
        logger.info(giftItem);

        this.props.navigation.navigate('GiftDetail',{giftItem : giftItem});
    };
    //
    endReachAction = () => {
        /**
         *   bannerData : [],
         recommendHeaderData : [],
         giftItemsData : [],
         tagIdOffsetObj : {},
         refreshing
         */
        let {homepage} = this.props;
        let {tagIdOffsetObj, isLoadMoreData} = homepage;
        logger.info('滑到底部');

        if (isLoadMoreData){
            return;
        }
        store.dispatch(actions.getRecommendGiftItemData(tagIdOffsetObj['tagId'],tagIdOffsetObj['offset']));
    };
    pressScanButton = () => {
        console.log('二维码扫描');
    }

}


const styles = StyleSheet.create({
    text : {
        width : 100,
        height : 25,
    },
    container: {
        flex: 1,
        backgroundColor: COLOR.themeBackGroundRedColor
    },
    tabBarText: {
        fontSize : 14,
        marginTop: 13,
    },
    tabBarUnderline: {
        backgroundColor: COLOR.themeRedColor
    },
    navigation :{
        backgroundColor : 'white',
    },
    headerTitleStyle : {
        color:COLOR.themeRedColor,
        fontSize: 20,
    }
});


function mapStateToProps(state) {
    let {homepage} = state;
    return {
        homepage
    }
}

function mapDispatchToProps(dispatch) {
    return bindActionCreators(actions, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(HomePage)